<template>
	<view class="container">
		<view class="tui-page__hd">
			<view class="tui-page__title">Dialog</view>
			<view class="tui-page__desc">对话框</view>
		</view>
		<view class="tui-page__bd">
			<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="0 auto" @click="shown">确认取消按钮</tui-button>
			<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="40rpx auto" @click="openConfirm">只有确认按钮</tui-button>
			<tui-dialog :buttons="buttons" :show="show" title="提示" @close="close" @click="buttonTap">
				<!-- <template v-slot:title></template> -->
				<template v-slot:content>
					标题、内容、按钮均可自定义
				</template>
				<!-- <template v-slot:footer></template> -->
			</tui-dialog>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				buttons: []
			};
		},
		methods: {
			openConfirm(){
				this.buttons=[ {
					text: '确定',
					color: '#EB0909'
				}]
				
				this.show = true
			},
			shown() {
				this.buttons=[{
					text: '取消'
				}, {
					text: '确定',
					color: '#586c94'
				}]
				this.show = true
			},
			close() {
				this.show = false
			},
			buttonTap(e){
				console.log(e)
				this.close()
			}
		}
	};
</script>

<style>

</style>
